<template>
	<view class="main">
		<custom @showTopDailog="showTopDailog"></custom>
		<view class="main_containers">
			<pageTitle name="周边产品" :navBarArr="navBarArr"></pageTitle>
			<view class="main_containers_goods">
				<view class="main_containers_goods_top">
					<view class="main_containers_goods_top_title">
						GOODS CATEGORY
					</view>
					<view class="main_containers_goods_top_title_dec">
						蓝光
					</view>
				</view>
				<view class="main_containers_goods_content">
					<view class="main_containers_goods_content_title">
						Animelo Summer Live 2023 -AXEL-蓝光
					</view>
					<view class="main_containers_goods_content_info">
						<view class="main_containers_goods_content_info_time">
							{{gooodsInfos.time}}
						</view>
						<view class="main_containers_goods_content_info_website">
							{{gooodsInfos.website}}
						</view>
						<view class="main_containers_goods_content_info_dec" v-html="gooodsInfos.content">
							
						</view>
					</view>
				</view>
			</view>
		</view>
		<footerContainer></footerContainer>
		<!-- 弹窗 -->
		<topDailog v-if="topDailogStatus" @closed="topDailogStatus=false"></topDailog>

	</view>
</template>

<script>
	import topDailog from '@/components/common/topDailog.vue';
	import pageTitle from '@/components/common/pageTitle.vue';
	import footerContainer from '@/components/common/footer.vue';
	import {
		mapMutations
	} from 'vuex'


	export default {
		components: {
			topDailog,
			footerContainer,
			pageTitle,

		},
		data() {
			return {
				topDailogStatus: false,
				navBarArr: [{
						id: '1',
						name: "首页"
					},
					{
						id: '2',
						name: "周边商品"
					}
				],
				gooodsInfos:{
					time:"[发行日期]2024年3月27日（星期三",
					website:"[购买链接]www.taobao.com",
					content:'<image class="image_5" referrerpolicy="no-referrer" src="/static/content2.png"/>'
				}
			}
		},
		onShow() {

		},
		onLoad(options) {
			let _this = this

		},
		onReady() {



		},
		methods: {
			showTopDailog() {
				this.topDailogStatus = true
			}
		},
	}
</script>

<style scoped lang="scss">
	.main {
		min-height: 100vh;
		position: relative;
		padding-bottom: 320rpx;
		background-image: url("../../static/bg_middle.png");
		background-size: 100% 100%;

		&_containers {
			&_goods {
					padding:0 32rpx;
				&_top {
					margin-top: 20rpx;

					&_title {
						font-size: 48rpx;
						line-height: 60rpx;
						font-weight: 700;
						&_dec {
							font-size: 28rpx;

						}

					}
				}
				&_content{
					margin-top:60rpx;
					&_title{
						font-size:40rpx;
						line-height: 60rpx;
						font-weight:700;
						padding:10rpx 0rpx;
						border-bottom: 1px solid rgba(0, 0, 0, 1);
					}
					&_info{
						font-size:32rpx;
						line-height: 48rpx;
						padding:24rpx 0rpx;
						::v-deep image{
							width:100%;
						}
						::v-deep img{
							width:100%;
						}
					}
				}
			}
		}
	}
</style>